<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="../../common/taglib.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <%@include file="../../common/common-css.jsp" %>
    <link href="${pageContext.servletContext.contextPath }/css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="${pageContext.servletContext.contextPath }/js/jquery-1.8.0.min.js"></script>
  </head>
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>用户查询</title> 
<style type="text/css"> 
    html{height:100%} 
    body{height:100%;margin:0;padding:0;font-size:15px;} 
    
    
    .shell{margin:2px 0 0 0px;}
.shell strong{background:red;color:#eee;font-size:16px;padding:5px 20px;margin-left:10px;}
.shell span{color:#454545;font-size:12px;margin-left:10px;cursor:pointer;}
#logo img{border:none;}
#menu{position:absolute;background:#515151;color:#eee;padding:4px;z-index:1000000;margin-left: 86px;}
#menu ul,#menu li{margin:0;padding:0;list-style:none;}
#menu li a{display:block;font-size:14px;color:#fff;text-decoration:none;zoom:1}
#menu li a:hover,#menu li.focus a{background:#606060;}
#menu li{float:left;display:inline;width:78px;line-height :25px;text-align:center;margin-left:4px;}
#menu ul{border-bottom:1px dashed #666;float:left;padding:5px;width:340px;}
.menufoot{clear:both;text-align:right;padding:10px;}
.menufoot a{color:#339999;text-decoration:none;padding:5px 10px;}
.menufoot a:hover{background:#606060;color:#339999;text-decoration:none;}
</style> 
<script language="javascript" src="http://app.mapabc.com/apis?t=javascriptmap&v=3&key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3"></script> 
<script type="text/javascript"> 
var mapObj; 
  
function mapInit(){ 
	var opt = { 
			  
	        center: new MMap.LngLat(116.37355900, 39.91253000),//地图中心点 
	    }; 
    mapObj = new MMap.Map("iCenter"); 
    getUserPostion();
} 
function addOrder(id){
	var  usertelephone= $("#usertelephone").val();
	window.location.href = "${pageContext.servletContext.contextPath }/background/order/addUI.html?serviceId="+id+"&memberId="+usertelephone;
}

function addMarker(id,name,telephone,address,lat,lon,i){   
	//构造点对象   
	var marker = new MMap.Marker({                      
	id:"marker"+i, //marker id                         
	position:new MMap.LngLat(lon,lat), //位置    
	offset:new MMap.Pixel(-11.5,-32), //基点为图片左上角，设置相对基点的图片位置偏移量，向左向下为负   
	icon:"http://code.mapabc.com/images/lan_1.png",//图标，直接传递地址，还可以为MMap.Icon 对象   
	draggable:false, //不可拖动    
	cursor:"../MapControl/openhand.cur"//鼠标悬停时显示的光标样式   
	});    
	mapObj.setZoom(18);   
	mapObj.addOverlays(marker);//添加点覆盖物   
	mapObj.setFitView([marker]);//使点覆盖物自适应视野   
	//构造信息窗口对象   
	var inforWindow = new MMap.InfoWindow({   
		content:"<table border='0' cellpadding='0' cellspacing='0' style='font-family:verdana;font-size:80%'>"+
		"<tr><td style='border-bottom:1px solid #000;'><b>"+name+"</b><input type='button' value='下单' onclick='addOrder("+id+")'></td></tr>"+
		"<tr><td>电话 :"+telephone+"</td></tr>"+
		"<tr><td>地址 : "+address+"</td></tr>"+
		"</table>",   
		offset:new MMap.Pixel(-100,-96)   
	});   
	inforWindow.open(mapObj,marker.getPosition());   
	mapObj.bind(marker,"mouseover",function(e){   
		inforWindow.open(mapObj,marker.getPosition());     
	});  
}  
function addMarkerUserInfo(id,name,age,deviceContact,telephone,address,lat,lon,i){   
	//构造点对象
	var marker = new MMap.Marker({                      
	id:"marker"+i, //marker id                         
	position:new MMap.LngLat(lon,lat), //位置    
	offset:new MMap.Pixel(-11.5,-32), //基点为图片左上角，设置相对基点的图片位置偏移量，向左向下为负   
	icon:"http://app.mapabc.com/jsmap/3/Images/marker_sprite.png",//图标，直接传递地址，还可以为MMap.Icon 对象   
	draggable:false, //不可拖动    
	cursor:"../MapControl/openhand.cur"//鼠标悬停时显示的光标样式   
	});    
	mapObj.setZoom(11);   
	mapObj.addOverlays(marker);//添加点覆盖物   
	mapObj.setFitView([marker]);//使点覆盖物自适应视野   
	//构造信息窗口对象   
	var inforWindow = new MMap.InfoWindow({   
		content:"<div>用户信息：</div><table border='0' cellpadding='0' cellspacing='0' style='font-family:verdana;font-size:80%'>"+
		"<tr><td style='border-bottom:1px solid #000;'><b>"+name+"</b></td></tr>"+
		"<tr><td>年龄 :"+age+"</td></tr>"+
		"<tr><td>电话 :"+telephone+"</td></tr>"+
		"<tr><td>设备电话 :"+deviceContact+"</td></tr>"+
		"<tr><td>地址 : "+address+"</td></tr>"+
		"</table>",   
		offset:new MMap.Pixel(-100,-96)   
	});   
	inforWindow.open(mapObj,marker.getPosition());   
	mapObj.bind(marker,"mouseover",function(e){   
		inforWindow.open(mapObj,marker.getPosition());     
	});  
}  
var code = '${memberinfo.code}';
function getUserPostion(){
	if(code=='200'){
		alert("用户信息定位成功！");
		$.ajax({
			   type:"GET",
			   url:"${pageContext.servletContext.contextPath }/queryServiceProviders.html",
			   dataType:"json",
			   /* data:{lon:"116.37355900",lat:"39.91253000"}, */
			   data:{lon:"${memberinfo.lon}",lat:"${memberinfo.lat}"},
			   success:function(data){ 
				   $.each(data.serviceProviders, function(i, item) { 
						var id=item.id;
						var lat=item.lat;
						var lon=item.lon;
						var name=item.servicename;
						var address=item.address;
						var telephone=item.telephone;
						if(lat==null)lat="";
						if(lon==null)lon="";
						if(telephone==null)telephone="";
						addMarker(id,name,telephone,address,lat,lon,i);
					});
				   /* addMarkerUserInfo("","${memberinfo.name}","${memberinfo.age}","${memberinfo.deviceContact}","${memberinfo.telephone}","${memberinfo.address}","39.91253002","116.37355983",-1); */
				   addMarkerUserInfo("","${memberinfo.name}","${memberinfo.age}","${memberinfo.deviceContact}","${memberinfo.telephone}","${memberinfo.address}","${memberinfo.lat}","${memberinfo.lon}",-1);
			   }
			}
		); 
	}else{
		alert("IMEI获取失败，请重新获取！");
	}
	
}

function selectByLabel(){
	if(code=='200'){
		var utypeId = $("#ptypeId").val();
		var stypeId = $("#type_Id").val();
		$.ajax({
			   type:"GET",
			   url:"${pageContext.servletContext.contextPath }/queryServiceProviders.html",
			   dataType:"json",
			   /* data:{lon:"116.37355900",lat:"39.91253000"}, */
			  data:{lon:"${memberinfo.lon}",lat:"${memberinfo.lat}",ptypeId:utypeId,typeId:stypeId},
			  /* data:{lon:"116.37355983",lat:"39.91253002",ptypeId:utypeId,typeId:stypeId}, */
			   success:function(data){
				   mapObj.clearMap();
				   $.each(data.serviceProviders, function(i, item) { 
						var id=item.id;
						var lat=item.lat;
						var lon=item.lon;
						var name=item.servicename;
						var address=item.address;
						var telephone=item.telephone;
						if(lat==null)lat="";
						if(lon==null)lon="";
						if(telephone==null)telephone="";
						addMarker(id,name,telephone,address,lat,lon,i);
					});
				   addMarkerUserInfo("","${memberinfo.name}","${memberinfo.age}","${memberinfo.deviceContact}","${memberinfo.telephone}","${memberinfo.address}","${memberinfo.lat}","${memberinfo.lon}",-1); 
				   /* addMarkerUserInfo("","${memberinfo.name}","${memberinfo.age}","${memberinfo.deviceContact}","${memberinfo.telephone}","${memberinfo.address}","39.91253002","116.37355983",-1); */
			   }
			}
		); 
	}
	
}



function getLabelList(){
	var uplabel = $("#ptypeId").val();
	if(uplabel!=null&&uplabel!=0){
	$.ajax({url:"${pageContext.servletContext.contextPath }/background/serviceProvider/searchTypeList.html?pid="+uplabel,
	   type:"post",
	   cache:"false",
	   error : function() {
		   alert("系统繁忙，请稍后再试！");
		},
	   success:function(msg){
		   $("#typeId").html(msg);
	   }
	});
	}else{
		$("#typeId").html('<select name="typeId" id="type_Id"><option value="0">请选择</option></select>');
	}
}
</script> 
</head> 
<body onload="mapInit();">
<div class="volume">
            	<img src="${pageContext.servletContext.contextPath }/images/toleft.png" style="margin:23px 0 0 2px;_margin:23px 0 0 0px;" />
</div>
<div class="rightcon">
<div id="head">
  <table >
          <tr>
                    	<%-- <td class="odd">运营商名称：
                        </td>
                        <td class="even"><input   type="text" class="input1" name="operatorname" value="${serviceProvider.operatorname }"/>
                        </td> --%>
                        <td><strong >类别名称：</strong>
                        </td>
                        <td>
                        <select name="ptypeId"  id="ptypeId" onchange="getLabelList()">
								<option value="0">请选择</option>
											<c:forEach var="key" items="${serviceTypes}">
												<option value="${key.id}" <c:if test="${key.id eq serviceProvider.ptypeId}">selected="selected"</c:if>>${key.name}</option>
											</c:forEach>
						</select>
                        </td>
                         <td ><strong >子类别名称：</strong>
                        </td>
                        <td id="typeId">
						<select name="typeId" id="type_Id">
									<option value="0">请选择</option>
										<c:forEach var="key" items="${userviceTypes}">
												<option value="${key.id}" <c:if test="${key.id eq serviceProvider.typeId}">selected="selected"</c:if>>${key.name}</option>
											</c:forEach>
										</select>
                        </td>
                        <td class="odd"  rowspan="2"  >
                        	<input type="image" src="${pageContext.servletContext.contextPath }/images/cx.png" width="50" height="20" onclick="selectByLabel();"/>
                        </td>
                    </tr>
                   <%--  <tr>
                    	<td class="odd">服务商名称：
                        </td>
                        <td class="even"><input  type="text" class="input1" name="name" value="${serviceProvider.name }" />
                        </td>
                    </tr> --%>
                </table>
</div>
<table width='100%'  border="0" cellpadding="0" cellspacing="2" height='100%'> 
<input type="hidden" id="usertelephone" value="${imei }" class="input">
   <%-- 	<tr> 
        <td align="center">用户电话号码：<input type="text" id="usertelephone" value="" class="input"><a href="#" onclick="getUserPostion()"><img src="${pageContext.servletContext.contextPath }/images/cx.png" width="81" height="30"></a></td> 
    </tr>  --%>
    <tr> 
        <td  style="width:100%;height:100%;"><div id="iCenter" style="height:100%; width:100%"></div></td> 
    </tr> 
</table> 
</div>


<script type="text/javascript">
//<![CDATA[
ldh={
    get:function (el){
        return typeof el=="string"?document.getElementById(el):el;
    },
    on:function(el,type,fn){
        el=this.get(el);
        el.attachEvent?
        el.attachEvent('on'+type,function(){fn.call(el,event)}):
        el.addEventListener(type,fn,false);
        return this
    },
    align:function (el,el2,x,y){
       var rect=this.get(el2).getBoundingClientRect(),x=x||0,y=y||0;
        el.style.top=rect.top+this.get(el2).offsetHeight+y+'px';
        el.style.left=rect.left+x+'px'
    },
   stop:function (e){
        e=e||window.event;
        e.stopPropagation&&e.stopPropagation();
        e.cancelBubble=true
    },
    onblur:function(el,fn) {
        el=this.get(el);
        this.on(el,'click',function (e){
            ldh.stop()
        }).on(document, 'click',function(e) {
            el.style.display='none';
        });
        return this
    }
};
ldh.onblur('menu').on('menuBtn','click',function (){
    var css=ldh.get('menu').style;
    if(css.display!='none') return ;
    ldh.align(ldh.get('menu'),this,-85,10);
    css.display= 'block';
    ldh.stop();
})
//]]>
</script>
</body> 
</html> 

